<template>
    <div class="tinymce-editor">
        <editor
                ref="editor"
                v-model="myValue"
                :init="init"
                :disabled="disabled"
                id="editor"
                @onClick="onClick"
        />
    </div>
</template>

<script>
    import tinymce from 'tinymce/tinymce'
    import Editor from '@tinymce/tinymce-vue'
    import 'tinymce/themes/silver'
    import 'tinymce/icons/default/icons'

    // 编辑器插件plugins
    // 更多插件参考：https://www.tiny.cloud/docs/plugins/
    import 'tinymce/plugins/image' // 插入上传图片插件
    // import 'tinymce/plugins/media' // 插入视频插件
    // import 'tinymce/plugins/table' // 插入表格插件
    // import 'tinymce/plugins/lists' // 列表插件
    // import 'tinymce/plugins/wordcount' // 字数统计插件
    import 'tinymce/plugins/autosave' // 自动存稿
    // import 'tinymce/plugins/fullscreen' // 全屏
    // import 'tinymce/plugins/preview' // 预览
    import 'tinymce/plugins/save' // 保存
    import 'tinymce/plugins/autoresize' // 编辑器大小自适应

    import {pictureAdd, updateHtml} from '../../api/file'

    export default {
        name: "tinymce",
        components: {
            Editor
        },
        props: {
            initHeight: {
                type: Number,
                default: 200
            },
            toolbar: String,
            readonly: Boolean,
            selectedFile: Object,
            disabled: Boolean,
            isUpdate: Number
        },
        data() {
            return {
                baseUrl: process.env.VUE_APP_BASE_API,
                init: {
                    // selector: "#editor", //tinymce的id
                    content_css: ['./tinymce/skins/content/default/content.css', './tinymce/skins/ui/oxide/content.min.css'],
                    branding: false,
                    language_url: './tinymce/langs/zh_CN.js', // public目录下
                    language: 'zh_CN',
                    skin_url: './tinymce/skins/ui/oxide', // public目录下
                    // height: '1000px',
                    readonly: this.readonly,
                    autoresize_on_init: true,
                    toolbar_sticky: true,
                    // height:500,
                    // file_picker_types: 'media',
                    plugins: 'image save autosave autoresize', // 父组件传入 或者 填写个默认的插件 要选用什么插件都可以 去官网可以查到
                    toolbar: 'undo redo | bold italic forecolor backcolor | image lists | removeformat restoredraft save autosave', // 工具栏 我用到的也就是lists image media table wordcount 这些 根据需求而定
                    menubar: '',
                    autosave_prefix: 'tinymce-autosave-' + this.selectedFile.id,
                    autosave_restore_when_empty: true,
                    autosave_interval: '10s',
                    autosave_retention: '5m',
                    toolbar_mode: 'sliding',
                    elementpath: false,
                    placeholder: '输入正文',
                    auto_focus: true,
                    init_instance_callback: () => {
                        // console.log(editor.ui.registry.addContextToolbar(this.toolbar))
                        tinymce.activeEditor.getBody().setAttribute('contenteditable', !this.readonly)

                    },
                    save_onsavecallback: () => {
                        this.updateHtml()
                    },
                    images_upload_handler: (blobInfo, success, failure) => {
                        // console.log(123)
                        const fileid = this.selectedFile.id
                        pictureAdd(blobInfo.blob(), fileid)
                            .then(result => {
                                success(result.url)
                            })
                            .catch(err => {
                                failure(err)
                            })
                    }
                },
                myValue: '',
                timingSave: '',
                oldValue: '',
            }
        },
        methods: {
            onClick() {
                setTimeout(() => {
                    let editor = document.getElementById('editor');
                    if (editor) {
                        editor.scrollIntoView(true);
                    }
                    // editor.scrollIntoViewIfNeeded();
                }, 200)
            },
            getHtml() {
                const editor = this.$refs.editor.editor
                // const url = encodeURIComponent(editor.documentBaseURI.getURI())
                //   console.log(editor.getContent())
                let html = '';
                if (editor) {
                    html = `<!DOCTYPE html>
                <html>
                <head>
                 <meta charset="UTF-8">
                <meta name="Generator" content="EditPlus®">
                <meta name="Author" content="">
                <meta name="Keywords" content="">
                <meta name="Description" content="">
                  <link type="text/css" rel="stylesheet" href="./tinymce/skins/ui/oxide/content.min.css">
                  <link type="text/css" rel="stylesheet" href="./skins/content/default/content.css">
                </head>

                <body id="tinymce" class="mce-content-body ">
                 ${editor.getContent()}
                </body>
                </html>`
                }
                return html
            },
            updateHtml() {
                const fileid = this.selectedFile.id
                updateHtml(fileid, this.myValue)
                    .then(result => {
                        console.log(result)
                    })
                    .catch(err => {
                        console.log(err)
                    })
            },
            automatic() {
                this.timingSave = setInterval(() => {
                    if (this.myValue !== this.oldValue) {
                        this.updateHtml()
                    }
                }, 10000)
            },
        },
        mounted() {
            // console.log(this.initHeight)
            this.$nextTick(() => {
                tinymce.init({})
                if (this.isUpdate === 1) {
                    this.automatic()
                }
            });

            // setTimeout(() => {
            //     let editor = document.getElementById('editor');
            //     editor.scrollIntoView(true);
            // },200)
        },
        destroyed() {
            clearInterval(this.timingSave);
            tinymce.remove();
        }
    }
</script>

<style>
    .tinymce-editor {
        width: 100%;
        /*height: 1000px;*/
    }

    .tox-tinymce {
        border: none !important;
        /*height: 700px !important;*/
    }

    .tox-statusbar {
        /*background: blue;*/
        border: none !important;
    }

    .tox-toolbar__group {
        border: none !important;
    }

    /*.tox .tox-dialog-wrap {*/
    /*    top: 140px !important;*/
    /*}*/
</style>
